<script setup lang="ts">
// import {Lightning, Share } from '@icon-park/vue-next';
import {storeToRefs} from 'pinia';
import { computed } from 'vue';

import {useEditorStore} from "@/stores/editor";
import type { Block } from '@/types/block';

import ChartSetting from './ChartSetting.vue';
import ImageSetting from './ImageSetting.vue';
// import type {Block} from '@/types/block';
import TextSetting from './TextSetting.vue';

const editorStore=useEditorStore()

const {selectedBlock}=storeToRefs(editorStore)

const blockRightPanel = computed(()=>{
  if(!selectedBlock.value) return null;
  switch(selectedBlock.value.type){
    case 'text':
      return TextSetting;
    case 'image':
      return ImageSetting;
    case 'chart':
      return ChartSetting;
    default:
      return null;
  }
})

const handleUpdateBlock = (block:Block)=>{
  editorStore.updateBlock(block)
}
</script>

<template>
  <div class="right-panel-wrapper" v-if="selectedBlock">
    <div class="right-panel-left"> 
      <!-- selectedBlock存在后才去走props传入数据的逻辑 -->
       <!-- <TextRightPanel v-if="selectedBlock"  :block="selectedBlock"/>   -->
       <component :is="blockRightPanel"  :block="selectedBlock" @change="handleUpdateBlock"/>
    </div>
  </div>
</template>

<style scoped>
.right-panel-wrapper {
  display: flex;
  height: 100%;
  padding: 20px;
  width: 280px;
  background-color: #f5f5f5;
  border: 1px solid #e8e8e8;
}
.right-panel-left{
  display: flex;
  padding:0 10px;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}
</style>
